<template>
  <div>
    <div class="search-title">
      <img @click="back" class="search-left" src="@/assets/img/u57.png" alt="">
      <div class="search-center">
        <img src="@/assets/img/u203.png" alt="">
        <input ref="inputText" @keyup.enter="search" type="text" v-model="textContent" placeholder="通灵兽消失术">
      </div>
      <span class="search-right">搜索</span>
    </div>
    <div v-if="!flag" class="content">
      <div class="history">
        <p>历史记录</p>
        <ul>
          <li v-for="(item, index) in nowHistyor" :key="index">{{item}}</li>
        </ul>
      </div>
      <div class="hot-search">
        <p>热门搜索</p>
        <ul>
          <li v-for="(item, index) in hotSearchLi" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div v-else-if="flag" v-for="(item, index) in searchData" :key="index">
      <video-list :title="item.title" :imgs="item.cover" :author="item.user.nickname" :id="item.id" v-if="item.type==2"></video-list>
      <more-img-list :title="item.title" :imgs="item.cover" :author="item.user.nickname" :id="item.id" v-else-if="item.cover.length >= 3"></more-img-list>
      <one-img-list :title="item.title" :imgs="item.cover" :author="item.user.nickname" :id="item.id" v-else></one-img-list>
    </div>
  </div>
</template>

<script>
import searchApi from '@/api/search'
import MoreImgList from '@/commonComponent/moreImgList'
import OneImgList from '@/commonComponent/oneImgList'
import VideoList from '@/commonComponent/videoList'

export default {
  data() {
    return {
      hotSearchLi: [
        "办公司小野否认解散",
        "月季如何嫁接",
        "花露水的妙用",
        "通灵兽消失术",
        "上海厂房坍塌结果",
        "中国机长延长上映",
        "张恒郑爽疑似分手",
        "波音737引擎故障",
        "暨南大学女生失联",
        "必胜客人造肉披萨"
      ],
      textContent: '',
      searchData: [],
      flag: false,
      history: [],
      nowHistyor: JSON.parse(localStorage.getItem('history'))
    }
  },
  methods: {
    search() {
      searchApi.getSearchData(this.textContent).then(res => {
        console.log(res.data.data);
        this.flag = true
        this.searchData = res.data.data
        this.history.push(this.textContent)
        if (this.history.indexOf(this.textContent) > -1) {
          localStorage.setItem('history', JSON.stringify(this.history))
        }

      })
    },
    back() {
      this.flag = false
      this.textContent = ''
      this.nowHistyor = JSON.parse(localStorage.getItem('history')) || []
    }
  },
  components: {
    MoreImgList,
    OneImgList,
    VideoList
  }
}
</script>

<style scoped>
.search-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3vw;
}

.search-left {
  width: 4.5vw;
  margin-left: 5vw;
}

.search-center {
  position: relative;
  width: 100%;
  padding: 0 5vw;
}

.search-center img {
  position: absolute;
  width: 4.5vw;
  vertical-align: middle;
  left: 10vw;
  top: 3.5vw;
}

.search-center input {
  width: 100%;
  text-indent: 12vw;
  padding: 3.4vw 0;
  background-color: #f2f2f2;
  border: 1px solid #d7d7d7;
  outline: none;
  border-radius: 10vw;
  font-size: 3.5vw;
}

.search-right {
  width: 12vw;
  font-size: 4vw;
  margin-right: 5vw;
}

.content {
  margin-top: 6vw;
  padding: 0 5vw;
  color: #333333;
}
.history {
  padding-bottom: 5vw;
  border-bottom: 1px solid #d7d7d7;
}
.history p {
  font-size: 4.2vw;
  font-weight: 700;
  padding-bottom: 6vw;
}
.history ul li {
  display: inline-block;
  /* flex-direction: column; */
  /* justify-content: space-between; */
  line-height: 6vw;
  padding-right: 3vw;
}
.hot-search {
  margin-top: 6vw;
}
.hot-search p {
  font-size: 4vw;
  font-weight: 700;
  padding-bottom: 6vw;
}
.hot-search ul {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  font-size: 4vw;
}
.hot-search ul li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 0 0 50%;
  line-height: 10vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-search ul li:nth-child(2n) {
  padding-left: 6vw;
}
</style>
